package cn.ocars.playgame.pencilstudy.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.ocars.playgame.pencilstudy.ui.theme.BackgroundLight
import cn.ocars.playgame.pencilstudy.ui.theme.ButtonBlue
import cn.ocars.playgame.pencilstudy.ui.theme.ButtonGreen
import cn.ocars.playgame.pencilstudy.ui.theme.ButtonOrange
import cn.ocars.playgame.pencilstudy.ui.theme.ButtonPurple
import cn.ocars.playgame.pencilstudy.ui.theme.ButtonRed
import cn.ocars.playgame.pencilstudy.ui.theme.ButtonYellow
import cn.ocars.playgame.pencilstudy.ui.theme.PrimaryBlue
import cn.ocars.playgame.pencilstudy.ui.theme.PrimaryGreen
import cn.ocars.playgame.pencilstudy.ui.theme.TextPrimary
import cn.ocars.playgame.pencilstudy.ui.theme.TextWhite

data class PracticeType(
    val title: String,
    val color: Color,
    val iconRes: Int? = null
)

@Composable
fun WelcomeScreen(
    onPracticeTypeSelected: (PracticeType) -> Unit,
    onSettingsClick: () -> Unit,
    onAboutClick: () -> Unit,
    onExitClick: () -> Unit,
    onMultimodalGemmaClick: () -> Unit = {},
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier.fillMaxSize(),
        color = BackgroundLight
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            // 顶部标题栏
            TopBar()
            
            // 中部选择区
            PracticeTypeGrid(onPracticeTypeSelected)
            
            // 底部导航
            BottomNavigation(
                onSettingsClick = onSettingsClick,
                onAboutClick = onAboutClick,
                onExitClick = onExitClick,
                onMultimodalGemmaClick = onMultimodalGemmaClick
            )
        }
    }
}

@Composable
fun TopBar() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.padding(top = 24.dp)
    ) {
        // Logo占位 - 使用圆形背景代替
        Box(
            modifier = Modifier
                .size(80.dp)
                .clip(CircleShape)
                .background(PrimaryBlue),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "书",
                color = TextWhite,
                fontSize = 40.sp,
                fontWeight = FontWeight.Bold
            )
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        Text(
            text = "一年级书法",
            color = TextPrimary,
            fontSize = 32.sp,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center
        )
    }
}

@Composable
fun PracticeTypeGrid(onPracticeTypeSelected: (PracticeType) -> Unit) {
    val practiceTypes = listOf(
        PracticeType("数字练习", ButtonBlue),
        PracticeType("字母练习", ButtonGreen),
        PracticeType("笔画练习", ButtonOrange),
        PracticeType("偏旁练习", ButtonPurple),
        PracticeType("汉字练习", ButtonRed),
        PracticeType("词语练习", ButtonYellow)
    )
    
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(practiceTypes) { practiceType ->
            PracticeTypeButton(
                practiceType = practiceType,
                onClick = { onPracticeTypeSelected(practiceType) }
            )
        }
    }
}

@Composable
fun PracticeTypeButton(
    practiceType: PracticeType,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier
            .fillMaxWidth()
            .height(120.dp),
        shape = RoundedCornerShape(16.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = practiceType.color
        )
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            if (practiceType.iconRes != null) {
                Icon(
                    painter = painterResource(id = practiceType.iconRes),
                    contentDescription = practiceType.title,
                    modifier = Modifier.size(40.dp),
                    tint = TextWhite
                )
                Spacer(modifier = Modifier.height(8.dp))
            }
            Text(
                text = practiceType.title,
                color = TextWhite,
                fontSize = 18.sp,
                fontWeight = FontWeight.Medium
            )
        }
    }
}

@Composable
fun BottomNavigation(
    onSettingsClick: () -> Unit,
    onAboutClick: () -> Unit,
    onExitClick: () -> Unit,
    onMultimodalGemmaClick: () -> Unit = {}
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = 24.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        BottomNavItem("设置", onClick = onSettingsClick)
        BottomNavItem("AI评分", onClick = onMultimodalGemmaClick)
        BottomNavItem("关于", onClick = onAboutClick)
        BottomNavItem("退出", onClick = onExitClick)
    }
}

@Composable
fun BottomNavItem(
    text: String,
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        colors = ButtonDefaults.buttonColors(
            containerColor = PrimaryGreen,
            contentColor = TextWhite
        ),
        shape = RoundedCornerShape(8.dp)
    ) {
        Text(
            text = text,
            fontSize = 16.sp,
            fontWeight = FontWeight.Medium
        )
    }
}

@Preview(showBackground = true)
@Composable
fun WelcomeScreenPreview() {
    MaterialTheme {
        WelcomeScreen(
            onPracticeTypeSelected = {},
            onSettingsClick = {},
            onAboutClick = {},
            onExitClick = {}
        )
    }
}